import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StatusBar,
    StyleSheet,
    TouchableWithoutFeedback
} from 'react-native';

type Type = 'warm' | 'success';

const {
    currentHeight
} = StatusBar;

interface Props {
    type:Type,
    line?:number,
    message:string,
    onPress?:Function,
    onClose:Function
}

import warm_icon from './img/warm.png';
import success_icon from './img/success.png';

const icons = {
    warm:warm_icon,
    success:success_icon
}

class Content extends PureComponent<Props> {

    static defaultProps = {
        onClose:() => null
    }

    render() {
        const {
            type,
            line,
            message,
            onPress,
            onClose
        } = this.props;

        const Press=!!onPress ?
            TouchableWithoutFeedback:Fragment;

        const Props:any = {};

        if(!!onPress) {
            Props.onPress = () => {
                onPress();
                onClose();
            }
        }

        return (
            <Press {...Props}>
                <View style={[styles.container,styles[type]]}>
                    <View style={styles.content}>
                        <Image
                            source={icons[type]}
                            style={styles.iconStyle}
                        />
                        <Text
                            children={message}
                            numberOfLines={line}
                            style={styles.message}
                        />
                    </View>
                </View>
            </Press>
        )
    }
}

export default Content;


const styles = StyleSheet.create({
    container:{
        paddingTop:20
    },
    content:{
        alignItems:`center`,
        paddingVertical:18,
        paddingHorizontal:14,
        flexDirection:`row`
    },

    message:{
        flex:1,
        fontSize:14,
        color:`#fff`,
        paddingLeft:8,
        lineHeight:21
    },
    warm:{
        backgroundColor:`#DE3A17`
    },
    success:{
        backgroundColor:`#32C5FF`
    },
    iconStyle:{
        width:14,
        height:14
    }
}) as any;